<template>
	<view class="flex_c content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
		</view>
		<c-gap v-if="isWXflaghi==true" height="100rpx" />
		<view class="warp">
			<view class="flex_r fj_b z_index2 top">
				<view class="tab"  >
					<view class="tab-item" :class="{ active: currentIndex == 0 }" @click="switchTabbarPage(0)">附近
					</view>
					<view class="tab-item" :class="{ active: currentIndex == 1 }" @click="switchTabbarPage(1)">新注册
					</view>
				</view>
			</view>
		</view>
		<c-gap height="10rpx" />

		<scroll-view class="flex1 custom-page" refresher-background="rgba(153, 153, 153, 0)" scroll-y refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh" @scrolltolower="getList(false)">
			<view class="flex flex-between flex-wrap px-24">
				<view class="z_index2 mb-18" v-for="(item,index) in userList">

					<view class="relative radius-12" @click="goUser(item)"
						style="background-color: #fff; padding-bottom:80rpx;">
						<image :src="item.usericon" mode="aspectFill" style="width: 344rpx; height:320rpx"
							class="radius-12">
						</image>
						<view style="position: absolute; top: 0;left: 0;right: 0;bottom: 0; width:100%;"
							class="c-fff f-28">
							<view style="position: absolute;bottom: 0; left: 0; width:100%;" class="py-24 px-12 c-fff">
								<view
									style="color:#000; height:40rpx; width:100%; clear:both; position: absolute; top: 2rpx;">
									<span style="float:left;">{{item.usernick}}</span>
									<view class="icon_ item-name-label"
										style="width:30rpx; height:30rpx; float:left; margin-left:10rpx; margin-top:2rpx;">
										<image v-if="item.sex == 1" :src="$c.config.media + 'mini/common/man.png'"
											mode="aspectFill" class="img"></image>
										<image v-else :src="$c.config.media + 'mini/common/woman.png'" mode="aspectFill"
											class="img"></image>
									</view>
								</view>
								<view  v-if="iswxflag==1" style="color:#000; font-size:20rpx; absolute; top: 0rpx; transform: translateY(20rpx);">
									<image style="width: 22rpx;height: 22rpx;"
										src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/home_wechat.png">
									</image>
									<text class="text_20"
										style="margin-top: 5rpx;margin-left: 5rpx;color: #b3b3b3;">{{replaceStar(item.weChatNum)}}</text>									
								</view>

								<view class="address-item">
									<view v-if="currentIndex==0" style="display: flex; flex-direction: row; align-items: center;">
										<image src="https://image.pttsy.cn/mini/common/site.png" style="width: 15rpx;" mode="widthFix"></image>
										<view style="color: #b3b3b3;">{{item.distance + 'km'}}</view>
									</view>
									<view v-if="currentIndex==1 && item.address" style="display: flex; flex-direction: row; align-items: center;">
										<image src="https://image.pttsy.cn/mini/common/site.png" style="width: 15rpx;" mode="widthFix"></image>
										<view style="color: #b3b3b3;">{{item.address}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="online-item" style="position: absolute; top: 10rpx; right: 10rpx;">
							<view  class="online-icon"
								style="width: 14rpx; height: 14rpx;border-radius: 7rpx;background-color: limegreen; margin-right: 5rpx;">
							</view>
							<text v-if="item.online>4">{{item.online}}分前在线</text>
							<text v-else >在线</text>
						</view>
					</view>
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="pay" type="center" :mask-click="false">
			<m-pay :money="pay.price" :projectId="pay.id" :type="3"></m-pay>
		</uni-popup>
	</view>

</template>
<script>
	import Mpay from '@/components/m-pay/m-pay.vue';
	import CGap from '@/components/c-gap.vue';
	export default {
		components: {
			Mpay,
			CGap
		},
		data() {
			return {
				$c: this.$c,
				isWXflaghi: false,
				iswxflag: 1,
				isxiaopay: 0,
				pay: {},
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				pageno: 1,
				refreshEnable: true,
				refresherTriggered: true,
				type: 0,
				tabList: [{
						title: '同城'
					},
					{
						title: '活跃'
					}
				],
				userList: [],
				userList2: [],
				currentIndex: 0,
			}
		},
		onHide() {
			this.video.innerAudioContext.destroy();
		},
		onLoad() {
			this.getList(true);
			this.requestLatLng();
		},
		onShow() {
			getApp().menpiaoData()
		},
		methods: {
			replaceStar(str) {
				if (str) {
					var len = str.length;
					if (len <= 4) {
						return "******";
					} else {
						var regex = /^(.{0,2}).*?(.{2})$/; // 匹配字符串的前两位和最后2位
						return str.replace(regex, "$1*****$2")
					}
				} else {
					return "******";
				}
			},
			async codelogin() {
				console.log('***********11111111*******');
				let openid = uni.getStorageSync('wxopenid');
				if (!openid) {
					return;
				}
				let res = await this.$c.post('/app/login/login?loginname=' + openid +
					'&code=708090&loginType=2');
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userInfo', res.data.user);

			},
			async isPay() {
				let res = await this.$c.post("/app/tickUserInfo/info");
				if (res.code == 0) {
					if (res.data.windowTicket == 1) {
						uni.showTabBar()
						return;
					}
					res = await this.$c.post("/app/tickPrice/info");
					this.pay = res.data;
					uni.hideTabBar()
				}
			},
			onAudio(item) {
				if (this.video.userid != 0 && this.video.status != false && this.video.userid == item.userid) {
					if (this.video.status) {
						//暂停
						this.video.innerAudioContext.stop();
						this.video.status = false;
					} else {
						//播放
						this.video.innerAudioContext.play();
						this.video.status = true;
					}
				} else {
					this.video.userid = item.userid
					this.video.innerAudioContext.src = item.voiceSignature;
					this.video.innerAudioContext.autoplay = true;
				}

			},
			goUser(item) {
				var sameCity = false;
				if(this.currentIndex == 0){
					sameCity = true;
				}
				uni.navigateTo({
					url: `/pages/m-pages/m-user-info/index?userid=` + item.userid+'&sameCity='+sameCity
				})
			},
			goSearch() {
				uni.navigateTo({
					url: `/im/conversation/create-conversation/create`
				})
			},
			goMsg(item) {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + item.userid + `&conversationID=C2C` + item.texcode,
				});
			},
			refresherrefresh() {
				this.getList(true)
				this.refresherTriggered = true
			},
			async getList(refresh) {
				if(this.refreshEnable){
					this.refreshEnable = false;
					setTimeout(()=>{
						this.refreshEnable = true;
					}, 500);
				}else{
					return
				}
				
				if(refresh){
					this.pageno = 1;
					this.userList = [];
				}else{
					this.pageno++;
				}
				
				let url = "";
				if (this.currentIndex == 0) {
					url = '/appfujinren/recommentList?pageno=' + this.pageno + '&gender=1&type=1';
				}
				if (this.currentIndex == 1) {
					url = '/appfujinren/recommentList?pageno=' + this.pageno + '&gender=1&type=2';
				}
				let res = await this.$c.post(url)
				if (res.code == 0) {
					let list = res.data
					if (this.currentIndex == 0) {
						let userDistanceList = uni.getStorageSync('userDistance');
						if (!userDistanceList) {
							userDistanceList = [];
						}
						list.forEach(item => {
							let flag = true;
							if (!this.hasCacheDistance(userDistanceList, item)) {
								item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
								item.online = Math.floor(Math.random() * 30) + 1;
								let data = {
									userId: item.userid,
									distance: item.distance,
									nick: item.usernick,
									online: item.online,
									time: new Date().getTime()
								}
								userDistanceList.push(data);
							}
						});
						uni.setStorageSync('userDistance', userDistanceList);
					}
					this.userList = this.userList.concat(list)
					// console.log('this.userList: ',this.userList.length);
				}
				this.refresherTriggered = false
			},
			hasCacheDistance(userDistanceList, item) {
				let flag = false
				userDistanceList.forEach(data => {
					if (item.userid == data.userId) {
						item.distance = data.distance;
						item.online = data.online;
						let now = new Date().getTime();
						let old = data.time;
						if ((now - old) > 1000 * 60 * 20) {
							item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
							item.online = Math.floor(Math.random() * 30) + 1;
							data.time = now;
							data.distance = item.distance;
							data.online = item.online;
						}
						flag = true;
					}
				});
				return flag;
			},
			async open() {
				let value = uni.getStorageSync('home_open');
				if ((new Date).getDate() == value) {
					return;
				}
				let res = await this.$c.post('/app/user/getRandomUserList')
				if (res.code == 0) {
					this.userList2 = res.data
					uni.setStorage({
						key: 'home_open',
						data: (new Date).getDate(),
					});
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					this.$refs.popup.open()
					console.log(this.userList2)
				}
			},
			close() {
				this.$refs.popup.close()
			},
			switchTabbarPage(index) {
				this.currentIndex = index
				this.pageno = 1;
				this.userList = [];
				this.getList(true)
			},
			requestLatLng() {
				uni.getLocation({
					success: async (addr) =>{
						let res = await this.$c.post('/api/ipGetAddress/getAddress');
						if (res.code == 0) {
							const result = res.data.data.result;
							let city = res.data.data.result.city;
							uni.setStorageSync('city', city)
							let params = {
								lat: addr.latitude,
								lon: addr.longitude,
								address: city,
								addressdetail: city,
							}
							this.$c.post('/app/user/updateWeiZhi', params);
						}
					}
				});
			},
			async requestCity() {
				let res = await this.$c.post('/api/ipGetAddress/getAddress');
				if (res.code == 0) {
					const result = res.data.data.result;
					let city = res.data.data.result.city;
					uni.setStorageSync('city', city)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		// height: 100vh;
		background-size: 750rpx 100vh;
		//background-repeat: no-repeat;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.tab {
				display: flex;

				.tab-item.active {
					color: #ff1b6e;
				}

				.tab-item.active::after {
					margin-top: 6rpx;
					display: block;
					content: '';
					width: 90%;
					height: 6rpx;
					background: #ff1b6e;
					margin: 6rpx auto;
				}

				.tab-item {
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 300;
					color: #fff;
					line-height: 44rpx;
					margin-right: 50rpx;
					font-weight: 550;
				}
			}

			.scorll {
				height: calc(100vh - 266rpx);
				/* #ifdef H5 */
				height: calc(100vh - 266rpx);
				/* #endif */
				/* #ifdef MP */
				height: calc(100vh - 168rpx);
				/* #endif */

				/* #ifdef APP-PLUS */
				height: calc(100vh - 166rpx);
				/* #endif */

				overflow-y: hidden;
				width: 100%;
				// background-color: #161324;

				.fangzha-img {
					margin: 0 auto;
					height: 288rpx;
					width: 694rpx;
					display: block;
				}
			}

			.swiper {
				height: calc(100vh - 188rpx);
				padding-top: 35rpx;
			}

			.home-jiesuo {
				width: 694rpx;
				height: 100rpx;
				position: fixed;
				left: 33rpx;
				bottom: 10rpx;
				background-size: 100% 100%;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				z-index: 10;
				color: #a14617;
				border-radius: 100rpx;

				background: linear-gradient(127deg, #fff4de 30%, #ffe6ba 100%, #ffe6ba 100%);
			}

			.unvip-wrap {
				width: 600rpx;
				background-color: #fff;
				// color: #fff;
				padding: 50rpx 0rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				text-align: center;

				.unvip-content {
					padding: 0rpx 80rpx;
				}

				.unvip-btn {
					width: 500rpx;
					height: 80rpx;
					text-align: center;
					margin: 0 auto;
					line-height: 80rpx;

					color: #a14617;

					background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
					border-radius: 40rpx;
					font-size: 28rpx;
					margin-top: 80rpx;
				}
			}
		}
	}


	.custom-page {
		width: 100%;
		height: 0;
	}

	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background-color: #e3ecfb;
	}

	.popup {
		width: 620rpx;
		height: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		border-radius: 20rpx;
		background-color: #fff;
		background-image: linear-gradient(to top, #e0dbff, #fff);

		.popup-title {
			width: 100%;
			position: relative;
			color: #ff4d79;
			text-align: center;
			height: 60rpx;

			.popup-title-img {
				position: absolute;
				z-index: 2;
				right: 30rpx;
				top: -10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.popup-content {
			width: 100%;
			margin-top: 10rpx;

			.page-current {
				height: 0;
				width: 100%;

				.list {
					box-sizing: border-box;
					padding: 0 10rpx;
					width: 100%;
					height: 100%;
					flex-wrap: wrap;

					.item {
						position: relative;
						width: calc(33.33% - 6rpx);
						height: 46%;

						.selected {
							position: absolute;
							top: 4rpx;
							right: 4rpx;
							width: 44rpx;
							height: 44rpx;
							z-index: 9;
						}

						.item-img {
							width: 100%;
							height: 220rpx;
							border-radius: 20rpx;
							overflow: hidden;

							// background-color: #999;
							image {
								width: 220rpx;
								height: 220rpx;
							}
						}

					}

				}

			}
		}

		.popup-button {
			width: 450rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #f82f6b;
		}
	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.online-item {
		position: absolute;
		widht: 80rpx;
		right: 30rpx;
		bottom: 12rpx;
		height: 16rpx;
		font-size: 16rpx;
		font-weight: 400;
		color: #b3b3b3;
		line-height: 16rpx;

		.online-icon {
			float: left;
			width: 24rpx;
			height: 24rpx;
			display: block;
		}

		text {
			float: left;
		}
	}
	
	.address-item {
		position: absolute;
		right: 30rpx;
		bottom: 12rpx;
		height: 16rpx;
		font-size: 16rpx;
		font-weight: 400;
		color: #b3b3b3;
		line-height: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	
	}

	.top {
		width: calc(100% - 60rpx);
		height: 100rpx;
		margin: 0 auto;

		.nav {
			width: 400rpx;
			height: 90rpx;
			margin-top: 10rpx;

			.nav-item {
				width: 130rpx;
				height: 100%;

				.nav-item-title {
					height: 50rpx;
				}

				.nav-itemimg {
					position: relative;
					top: -10rpx;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}

				.nav_itemimg {
					opacity: 0;
					transition: all .3s;
				}
			}
		}

		.top-button {
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 32rpx;
			color: #f82f6b;
			border: 1px solid #f82f6b;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
	}


	.row {
		.item {
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			width: 100%;

			.item-img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				background-color: #999;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.item-r {
				.item-name {
					.item-name-label {
						// width: 100rpx;
						height: 40rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
					}
				}

				.infor {
					width: 100%;
					height: 50rpx;

					.infor-str {
						width: 1px;
						height: 30rpx;
						margin: 0 10rpx;
						background-color: #999;
					}
				}

				.voice {
					box-sizing: border-box;
					padding: 0 8rpx 0 0;
					width: 250rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: #ff0f6f;

					.voice-icon {
						width: 50rpx;
						height: 50rpx;
						overflow: hidden;
						border-radius: 50%;
					}

					.voice-img {
						height: 100%;
						margin: 0 10rpx;
					}

					.voice-value {
						box-sizing: border-box;
					}
				}



				.item-r-icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: #fff;
				}

			}
		}

	}
</style>